<!--
 * @Description: 
 * @Date: 2020-12-17 10:41:26
 * @LastEditors: lother
 * @LastEditTime: 2021-01-04 16:52:51
 * @FilePath: \AccountOpening-H5\src\components\page\k-select.vue
-->
<template>
    <div>
        <van-field 
            :value="value"
            :label="list['title_'+langSuff]"
            
            :required="required"
            :rules="rulesList">
            <template #input>
                <!-- <p v-show="value?false:true">{{$t('login.index.5638rr393s40')+list['title_'+langSuff]}}</p> -->
                <select v-model="value" >
                    <option style="display:none" value="" disabled>{{$t('login.index.5638rr393s40')}}</option>
                    <option :value="item.value" v-for="(item,index) in columns" :key="index">{{item['title_'+langSuff]}}</option>
                </select>
                <van-icon name="arrow-down" />
                <!-- <van-radio-group v-model="radios">
                    <van-radio v-for="(item) in columns" :key="item.value" :name="item.value" >
                        <div v-html="$backTitle(item['title_'+langSuff])"></div>
                        <template #icon="props">
                            <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
                        </template>
                    </van-radio>
                </van-radio-group> -->
            </template>
        </van-field>


        <!-- <van-field
            readonly
            clickable
            name="picker"
            :value="value"
            :label="list['title_'+langSuff]"
            :placeholder="'请选择'+list['title_'+langSuff]"
            @click="showPicker = true"
            :required="required"
            :rules="rulesList"
            />
        <van-popup v-model="showPicker" position="bottom">
            <van-picker
                :value-key="'title_'+langSuff"
                :default-index="index"
                show-toolbar
                :columns="columns"
                @confirm="onConfirm"
                @cancel="showPicker = false"
            />
        </van-popup> -->
    </div>
</template>
<script>
export default {
    name:"k-select",
    props:{
        val:{
            type:[String,Number],
            default:""
        },
        list:{
            type:Object,
            default:()=>{}
        }
    },
    data() {
        return {
            value: '',
            showPicker: false,
        }
    },
    created(){
    },
    computed:{
        required(){
            var boll = (this.list?.is_require)?true:false
            return boll
        },
        langSuff(){
            return this.$store.state.langSuff
        },
        index(){
            var filter = this.columns.find(item => String(item.value) == String(this.val)); //当前的item
            var index = this.columns.findIndex(item => String(item.value) == String(this.val)); //当前的index 
            if (filter) {
                this.value = filter['title_'+this.langSuff]
            } else {
                this.value = ''
            }
            return index||0
        },
        rulesList(){
            this.value = this.val
            var arr=[]
            if(this.list?.is_require){
                arr.push({ required: true, message: this.$t('login.index.5638rr393s40')+this.list['title_'+this.langSuff] })
            }
            var rules  = this.list?.rule ?? [];
            for (let index = 0; index < rules.length; index++) {
                const item = rules[index];
                 if(item.rule!==''){
                    arr.push({pattern:this.evalreg(item.rule) , message : item['error_tip_'+this.langSuff]})
                }
            }
            return arr
        },
        columns(){
            var list  = this.list?.options || [];
            return list
        }
    },
    methods: {
        onConfirm(item) {
            this.value = item['title_'+this.langSuff];
            this.showPicker = false;
            this.$emit('update:val',item.value)
        },
        evalreg(val) {
            val = val || "";
            return RegExp(val);
        },
    },
    watch:{
        value(val){
            this.$emit('update:val',val)
        }
    }
}
</script>
<style lang="less" scoped>
    .van-cell{
        p{
            position: absolute;
            top: 0;
            left:0;
            width: 100%;
            height: 100%;   
        }
    }
    select:focus{outline:none;}
    select::-ms-expand { display: none; }
    select{
        position: relative;
        z-index: 2;
        width: 100%;
        display: block;
        border:none;
            appearance:none;
            -moz-appearance:none;
            -webkit-appearance:none;
        background: transparent;
        padding-right: 0.4rem;
    }
</style>